<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态添加桌面</title>
    <script src="http://www.jianvary.com/jquery.js"></script>
    <script src="http://www.jianvary.com/box/layer/layer.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #desk{
            width: 100%;
            height: 100vh;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }
        #addDesk{
            width: 50px;
            height: 50px;
            line-height: 50px;
            color: blue;
            bottom: 5%;
            left: 45%;
            position: absolute;
            font-size: 30px;
            background: #f0f0f0;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            z-index: 1000
        }
        #nextDesk{
            width: 50px;
            height: 50px;
            line-height: 50px;
            color: blue;
            bottom: 5%;
            left: 55%;
            position: absolute;
            font-size: 20px;
            background: #f0f0f0;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            z-index: 1000
        }
        #preDesk{
            width: 50px;
            height: 50px;
            line-height: 50px;
            color: blue;
            bottom: 5%;
            left: 35%;
            position: absolute;
            font-size: 20px;
            background: #f0f0f0;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            z-index: 1000
        }
        #wrap{
            position: absolute;
            width: 100%;
            height: 100vh;
            /* overflow: hidden; */
            z-index: 2;
            /* top: -100vh; */
        }
        #wrap .newDeskStyle1{
            width: 100%;
            height: 100vh;
            background: #000;
        }
        #wrap .newDeskStyle2{
            width: 100%;
            height: 100vh;
            background: blue;
        }
        #wrap .newDeskStyle3{
            width: 100%;
            height: 100vh;
            background: #999;
        }
        #wrap .one{
            width: 100%;
            height: 100vh;
            background: green;
        }
        #wrap:nth-child(1){
            width: 100%;
            height: 100vh;
            background: blue;
            z-index: 5;
        }
        #wrap:nth-child(2){
            background: #999;
        }
    </style>
</head>
<body>

    <div id="desk">
        <div id="addDesk">+</div>
        <div id="nextDesk">next</div>
        <div id="preDesk">pre</div>
        <div id="wrap">
            <div class="one"></div>
        </div>
    </div>
    
    <script>

        let wrap = getId('wrap'),
            addDesk = getId('addDesk')
            nextDesk = getId('nextDesk')
            preDesk = getId('preDesk')
            oldFlag = localStorage.flag
            
        //flag++ global value
        var flag = 0
        
        //defalut
        wrap.style.top =  0;
        addDesk.onclick = function(){
            new NewDesk(flag).init();
        }
        nextDesk.onclick = function(){
            wrap.style.top =(parseInt(wrap.style.top) - wrap.clientHeight) +'px';
            console.log(wrap.style.top)
        }
        preDesk.onclick = function(){
            wrap.style.top =(parseInt(wrap.style.top) + wrap.clientHeight) +'px';
            console.log(wrap.style.top)
        }

        //load DOM behide run
        $(function(){
            new NewDesk(flag).createDsekStart();  //加载之前已经添加的桌面
        })

        //fun
        function getId(id){
            return document.getElementById(id);
        }

        //class
        function NewDesk(flag){
            this.flag = flag
        }
        NewDesk.prototype = {
            init: function(){
                this.createDesk();
            },
            createDesk: function(){
                layer.msg('new addDesk');
                flag++;
                var div = document.createElement('div');
                div.className = 'newDeskStyle'+ flag;
                wrap.appendChild(div);
                localStorage.setItem('flag',parseInt(oldFlag)+flag);
                console.log('test');
            },
            createDsekStart: function(){
                for(i=1;i<parseInt(localStorage.flag);i++){
                    var div = document.createElement('div');
                    div.className = 'newDeskStyle'+ i;
                    wrap.appendChild(div);
                }
            }
        }
    </script>
</body>
</html>